<template>
	<view id="body" class="uni-flex uni-column">
		<view class="flex-item flex-item-V" style="height: 70px" >
		   <image class="mapicon"  src="http://192.168.43.54:8002/images/icon/index/ditu.png" @click="gotoMap4House()"></image>
			<uni-search-bar placeholder="搜我想要！" @confirm="search()" v-model="searchValue" style="height: 200px;width: 80%; ">
				<uni-icons slot="searchIcon"  size="18" type="home" />
			</uni-search-bar>
		</view>
		
		<view class="flex-item flex-item-V">
			 <view class="uni-margin-wrap"> 
				<!-- <swiper class="swiper" circular :indicator-dots="indicatorDots" :autoplay="autoplay" :interval="interval" :duration="duration">
					<swiper-item>
						<view class="swiper-item">
							<image class="image" @tap="gotoIndex" src="http://192.168.43.54:8002/images/house/index/蚌壳.png"></image>
						</view>
					</swiper-item>
					<swiper-item>
						<view class="swiper-item">
							<image class="image" @tap="gotoIndex" src="http://192.168.43.54:8002/images/house/index/必看好房.png"></image>
						</view>
					</swiper-item>
					<swiper-item>
						<view class="swiper-item">
							<view>
								<image class="image" @tap="gotoVR" src="http://192.168.43.54:8002/images/house/index/vr浏览.png"></image>
							</view>
						</view>
					</swiper-item>
				</swiper> -->
				<view class="swiper">
                    <view class="uni-margin-wrap">
                        <uni-swiper-dot :photo="photo" mode="aspectFill" field="content" style="width: 100%;">
                            <swiper class="swiper-box"  :autoplay="true" :interval="3000" :duration="500" :indicator-dots=true>
                                <swiper-item v-for="(item, index) in photo" :key="index">
                                    <view :class="item.colorClass" class="swiper-item">
                                        <image class="image" :src="item.photoLocation" mode="aspectFill" />
                                    </view>
                                </swiper-item>
                            </swiper>
                        </uni-swiper-dot>
                    </view>
                </view>
			</view>
		</view>
		<view class="uni-flex uni-row" style="height: 100px;border-radius:30rpx;">
			<view class="flex-item uni-flex uni-column" @click="house_buy()">
				<image class="icon" src="http://192.168.43.54:8002/images/icon/index/买房.png"></image>
				<text class="icon-text">买房</text>
			</view>
			<view class="flex-item uni-flex uni-column" @click="house_sell()">
				<image class="icon" src="http://192.168.43.54:8002/images/icon/index/卖房.png"></image>
				<text class="icon-text">卖房</text>
			</view>
			<view class="flex-item uni-flex uni-column" @click="house_rent_in()">
				<image class="icon" src="http://192.168.43.54:8002/images/icon/index/租房.png"></image>
				<text class="icon-text">租房</text>
			</view>
			<view class="flex-item uni-flex uni-column" @click="house_rent_out()">
				<image class="icon" src="http://192.168.43.54:8002/images/icon/index/出租.png"></image>
				<text class="icon-text">出租</text>
			</view>
			<!-- <button type="default" class = "mini-btn btn-main" size="mini" @click="house_buy()">买房</button>
			<button type="default" class = "mini-btn btn-main" size="mini" @click="house_sell()">卖房</button>
			<button type="default" class = "mini-btn btn-main" size="mini" @click="house_rent_in()">租房</button>
			<button type="default" class = "mini-btn btn-main" size="mini" @click="house_rent_out()">出租</button> -->
		</view>
		<view>
			<view>
				<view class="uni-flex uni-row" v-for="(i,index) in rent" :key="i.houseId">
					<rentinglist v-bind:rent="i"></rentinglist>
            	</view>
				<view class="uni-flex uni-row" v-for="(j,index2) in sell" :key="j.houseId">
					<sellhouselist  v-bind:sell="j"></sellhouselist>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {UniSearchBar} from "@dcloudio/uni-ui"
	import sellhouselist from "../common/sellhouselist.vue"
	import rentinglist from "../common/rentinglist.vue"
	export default {
		data() {
			return {
				userId:1,
				title: 'Hello',
				background: ['color1', 'color2', 'color3'],
				indicatorDots: false,
				autoplay: true,
				interval: 20000,
				duration: 500,
				inputValue: 0,
				searchValue:'',
				command:[],
				sell:[],
				rent:[],
				photo: [{
                colorClass: 'uni-bg-white',
                photoLocation: 'http://192.168.43.54:8002/images/house/index/蚌壳.png',
                content: '内容 A'
                },
                {
                colorClass: 'uni-bg-white',
                photoLocation: 'http://192.168.43.54:8002/images/house/index/必看好房.png',
                content: '内容 B'
				},{
                colorClass: 'uni-bg-white',
                photoLocation: 'http://192.168.43.54:8002/images/house/index/vr浏览.png',
                content: '内容 B'
				}]
			}
		},
		components:{
			/*
			其他组件定义
			*/
			UniSearchBar,
			sellhouselist,
			rentinglist
			// slFilter
		},
		onLoad() {
			this.getRecommandSell()
			/*
			渲染的时候执行
			*/
		},
		methods: {
			/*
			1.关于搜索框的函数
			 */
			gotoMap4House(){
				console.log('la')
				uni.navigateTo({
					url: '/pages/index/plus/map4house/map4house'
				})
			},
			onKeyInput(){
				console.log('input str');
			},
			search(){
				/*
				用户搜索的时候
				 */
				let searchValue = this.searchValue;
				console.log('dfghjkl;')
				uni.navigateTo({
					url:"/pages/index/plus/search_res?searchValue="+this.searchValue
				})
			},
			/*
			2.mini btn后的函数
			 */
			house_buy(){
			// 买房
				console.log('buy')
				uni.navigateTo({
					url:"/pages/common/house_buy"
					})
			},
			house_sell(){
			// 卖房
				console.log('卖房')
				uni.navigateTo({
					url:"/pages/mine/addHouseToSell"
				})

			},
			house_rent_in(){
			// 租房
				console.log('buy')
				uni.navigateTo({
					url:"/pages/common/house_rent_in"
					})
			},
			house_rent_out(){
			// 出租房
				console.log('出租房');
				uni.navigateTo({
					url:"/pages/mine/addHouseToRent"
				})
			},
			gotoVR(){
				uni.navigateTo({
					url:"../common/vr"
				})
        	},
			gotoIndex(){
				uni.navigateTo({
					url:"https://cq.ke.com/"
				})
			},
			getRecommandSell(){
				let data = {userId: this.userId}
				this.$axios.post('getRecommandHouse_sell', this.qs.stringify(data))
				.then(res => {
					res.data.rentings.forEach(item => {
						this.command.push(item)
					})
					res.data.sells.forEach(item => {
						this.command.push(item)
					})
					this.getRent()
				})
				.catch(err => {
					console.log(err)
				})
			},
			getRent(){
				this.$axios.post('getAllRentings')
				.then(res =>{
                    this.rentingHouse = res.data.allRentings
					console.log(this.rentingHouse)
                    for(let j=0 ; j < this.command.length ; j++){
						// console.log('j='+j)
                        for(let k=0 ; k < this.rentingHouse.length ; k++){
							// console.log('k='+k)
                            if(this.rentingHouse[k].houseId == this.command[j].houseId){
                                let temporary = {}
                                temporary.houseId = this.rentingHouse[k].houseId
                                temporary.rentingHeading = this.rentingHouse[k].rentingHeading
                                temporary.rentingPrice = this.rentingHouse[k].rentingPrice
                                temporary.houseEstate = this.command[j].houseEstate
                                temporary.houseArea = this.command[j].houseArea
                                temporary.houseSurfaceplot = this.command[j].houseSurfaceplot
                                temporary.houseDirection = this.command[j].houseDirection
                                temporary.houseRegion = this.command[j].houseRegion
                                temporary.houseCity = this.command[j].houseCity
                                this.rent.push(temporary)
                            }
                        } 
					}
					this.getAllSells()
                })
				.catch(e => {
					console.log(e)
				})
			},
			getAllSells(){
				this.$axios.post('getAllSells')
                .then(res =>{
                    this.selling = res.data.allSells
                    for(let j=0 ; j < 4 ; j++){
                        for(let k=0 ; k < this.selling.length ; k++){
                            if( this.command[j].houseId == this.selling[k].houseId){
                                let temporary = {}
                                temporary.houseId = this.command[j].houseId
                                temporary.sellHeading = this.selling[k].sellHeading
                                temporary.sellPrice = this.selling[k].sellPrice
                                temporary.houseArea = this.command[j].houseArea
                                temporary.houseSurfaceplot = this.command[j].houseSurfaceplot
                                temporary.houseDirection = this.command[j].houseDirection
                                temporary.houseEstate = this.command[j].houseEstate
                                this.sell.push(temporary)
                            }
                        }
                    }
					console.log('dftgyuio->'+this.sell)
                })
			}
		},
	}
</script>

<style >

	/*
	1.主要布局的css
	 */
	.flex-item {
		width: 33.3%;
		/*height: 200px;*/
		text-align: center;
		line-height: 200px;
	}
	.flex-item-V {
		width: 100%;
		text-align: center;
		overflow: hidden;
	}


/*	2.滑块的css*/
	.uni-margin-wrap {
		width: 100%;
		overflow: hidden;
	}
	.swiper {
		overflow: hidden;
	}
	.swiper-item {
		/*display: block;*/
		/* line-height: 130px;
		text-align: center; */
		overflow: hidden;
		width: 100%;
	}


	/*
	2.对于4个主要的小按钮
	 */
	.btn-main{
		margin-bottom: 50px;
		margin-left: 10px;
	}

	/*
	3.搜索框的css
	 */
	.search-result {
		margin-top: 10px;
		margin-bottom: 20px;
		text-align: center;
	}
	.search-result-text {
		text-align: center;
		font-size: 14px;
	}
	.example-body {
		/* #ifndef APP-NVUE */
		display: block;
		/* #endif */
		padding: 0px;
	}

	.image{
		height: 500rpx;
		width: 100%;
	}

	.icon{
		padding: 20rpx 50rpx 10rpx;
		height: 90rpx;
		width: 90rpx;
	}

		
	.mapicon{
		margin: 2rpx 2rpx 0rpx 2rpx;
		height: 80rpx;
		width: 80rpx;
		float: left;
	}
	.icon-text{
		height: 10rpx;
		font-size:30rpx;
        color: rgb(0, 0, 0);
		padding:5rpx 0rpx;
	}

	.flex-item{
		line-height: 50rpx;
	}
	
	.swiper_img{
        height:500rpx;
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        margin-top:60rpx;
    }
    .swiper-box{
        height:500rpx;
        width:100%;
    }
    .image{
        width: 100%;
        height:500rpx;
    }
</style>

